<template>
	<view class="personal">
		<image class="bg-img" :src="app_img+'/app-img/user1.jpg'"></image>
		<view class="content-wrapper">
			<view class="personal-form">
				<form >
				<view class="personal-form-items">
					<view class="personal-form-items-title">账户:</view>
					<input type="text" class="personal-input" placeholder="请输入学号" name="userName" v-model="form.userName"/>
				</view>
				
				<view class="personal-form-items">
					<view class="personal-form-items-title">新密码:</view>
					<input type="password" class="personal-input" placeholder="请输入新密码" name="password" v-model="form.password"/>
				</view>
				</form >
			</view>
		</view>
		<div class="submit-wrapper">
			<button type="primary" class="personal-btn" @click="onSubmit()" :disabled="personaling">提交</button>
		</div>
	</view>
</template>

<script>
	import graceChecker from "@/common/rulesChecker.js"
	import {resetPwd} from "@/api/user.js"
	export default {
		data() {
			return {
				app_img:this.appimg,
				form:{
					userName:null,
					password:null,
				},
				personaling:false

			};
		},
		onLoad() {
		},
		created(){
		},
		methods:{
			
			 onSubmit(e) {  
				var rule = [
					{name:"userName", checkType : "sz", checkRule:"",  errorMsg:"账号不能为空",ruleMsg:"账号格式错误"},
					{name:"password", checkType : "sz-zm", checkRule:"",  errorMsg:"密码不能为空",ruleMsg:"密码格式错误"},
				];
				//进行表单检查
				var formData = this.form;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					resetPwd(formData).then(res=>{
						if(res.code==200){
							uni.showToast({title:"修改成功!", icon:"none"});
						}
						else if(res.code==500){
							uni.showToast({title:res.msg, icon:"none"});
						}
					})
				    
				}else{
					console.log(graceChecker)
				    uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			} 
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F5F6;
	}
	.personal {
		.content-wrapper {
			width: 100%;

			.herder {
				margin-top: 35rpx;
				width: 100%;
				margin-bottom: 10px;
				text-align: center;

				h1 {
					border: 0px;
					width: 50%;
					margin: 0 auto;
					text-align: center;
					border-bottom: 1px solid #E3E3E3;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}

			.personal-form {
				margin: 10px 10px 20px 15px;
				//background: #FFFFFF;

				.personal-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;

					.personal-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.personal-input {
						width: 100%
					}

					img {
						width: auto;
						height: auto;
						max-width: 100%;
						max-height: 100%;
					}
				}
			}
		}

		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
		}

	}
</style>

